<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="wiph=device-wiph, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./css/reset.css">
</head>
<body>
  <div class="hd"></div>
  <script src="./js/jquery.2.2.4.js"></script>
  <script>
    $(".hd").load("./public/public.html .hd");
  </script>
  <!-- 轮播图 -->
  <div class="box1"></div>
  <div class="floor">
    <a href="#f1">热卖推荐</a>
    <a href="#f2">礼盒推荐</a>
    <a href="#f3">精品玫瑰</a>
    <a href="#f4">恋人鲜花</a>
  </div>
  <!-- 热卖推荐 -->
  <div class="content" id="f1" >
    <div class="fresh">
      <h1>热卖推荐</h1>
      <span>我等着你，直到你来；无论何时，不管多久！</span>
    </div>
    <div class="product">
      <div class="white pic"></div>
    </div>
    <!-- 礼盒推荐 -->
    <div class="fresh" id="f2">
      <h1>礼盒推荐</h1>
      <span>快来抢购哦</span>
    </div>
    <div class="product">
      <div class="white"></div>
    </div>
    <!-- 精品玫瑰 -->
    <div class="fresh" id="f3">
      <h1>精品玫瑰</h1>
      <span>众里寻他千百度。蓦然回首，我却在，恋人鲜花处！</span>
    </div>
    <div class="classify">
      <h2>生日用花</h2>
      <a href="" target="_blank">玫瑰</a>
      <a href="" target="_blank">满天星</a>
    </div>
    <div class="product">
      <div class="white"></div>
    </div>
    <!-- 优雅百合 -->
    <div class="classify">
      <h2>优雅百合</h2>
    </div>
    <div class="product">
      <div class="white"></div>
    </div>
   
    <!-- 恋人鲜花 -->
    <div class="fresh" id="f4">
      <h1>恋人鲜花</h1>
    </div>
    <div class="brand">
      <div class="GNC">
        <img src="https://www.7hua.com/Tpl/2016skin/Public/imgbanner/ceng_kths.jpg" alt="">
      </div>
      <div class="small-logo">
        <img src="./images/newflower2_02.jpg" alt="">
      </div>
      <div class="GNC">
        <img src="https://www.7hua.com/Tpl/2016skin/Public/imgbanner/ceng_xh.jpg" alt="">
      </div>
    </div>
  </div>
  </div>
  <div class="fo"></div>
  <script>
    $(".fo").load("./public/public.html .fo")
  </script>
</body>
<script src="./libs/require.js" data-main="./js/indexMain"></script>
<script src="./js/jquery.banner.js"></script>
<script>
    const arr = [{
        src:"./images/1.jpg",
        alt:"1",
        title:"图片1"
    },{
        src:"./images/2.jpg",
        alt:"2",
        title:"图片2"
    },{
        src:"./images/3.jpg",
        alt:"3",
        title:"图片3"
    }]
    $(".box1").banner({
        items:arr,     // 图片，必传
        btn:false,          // 是否需要左右按钮，默认true
        list:true,         // 是否需要分页器，默认true
        autoPlay:true,      // 是否需要自动播放，默认true
        delayTime:3000,     // 自动播放延迟的时间，默认2000
        moveTime:600,       // 每张图运动的持续时间，默认200
        index:2,            // 当前图片索引，默认0
        prev_text:"<<<",     // 左按钮的文字
        next_text:">>>",     // 右按钮的文字
        currentList:"active"
    });
</script>
</html>